<span #contentElement><ng-content></ng-content></span>
<span class="apes-badge-status-dot apes-badge-status-{{apesStatus || presetColor}}"
      [style.background]="!presetColor && apesColor"
      *ngIf="apesStatus || apesColor"
      [ngStyle]="apesStyle"></span>
<span class="apes-badge-status-text" *ngIf="apesStatus || apesColor">{{ apesText }}</span>
<ng-container *apesStringTemplateOutlet="apesCount">
  <sup class="apes-scroll-number"
       *ngIf="showSup"
       @zoomBadgeMotion
       [ngStyle]="apesStyle"
       [class.apes-badge-count]="!apesDot"
       [class.apes-badge-dot]="apesDot"
       [class.apes-badge-multiple-words]="countArray.length>=2">
    <ng-container *ngFor="let n of maxNumberArray;let i = index;">
      <span class="apes-scroll-number-only"
            *ngIf="count <= apesOverflowCount"
            [style.transform]="'translateY(' + (-countArray[i] * 100) + '%)'">
          <ng-container *ngIf="!apesDot && countArray[i] !== undefined">
            <p *ngFor="let p of countSingleArray" [class.current]="p === countArray[i]">{{ p }}</p>
          </ng-container>
      </span>
    </ng-container>
    <ng-container *ngIf="count > apesOverflowCount">{{ apesOverflowCount }}+</ng-container>
  </sup>
</ng-container>
